<template>
    <div class="article-lists-container" ref="article-lists">
        <van-pull-refresh v-model="freshLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <!-- <van-cell v-for="item in articles" :key="item.art_id" :title="item.title" /> -->
                <article-item v-for="(item,index) in articles" :key="index" :articles="item" />
            </van-list>
        </van-pull-refresh>
        
    </div>
</template>

<script>
import { getArticles } from '@/api/article'
import { createLogger } from 'vuex'
import articleItem from '@/components/article-item'
import { debounce } from 'lodash'
    export default {
        name:'articleLists',
        components:{
            articleItem
        },
        props:{
            channel:{
                type: Object,
                required:true
            }
        },
        data() {
            return {
                articles: [],
                loading: false,   //判断是否还在加载
                finished: false,  //判断是否已经完成
                pre_timestamp: null,  //下一次请求数据的时间戳
                freshLoading: false,  //刷新加载
                scrollTop: 0, //距离滚动顶部的距离
            }
        },
        methods: {
            async onLoad() {
                // console.log(this.channel.id)
                // 1.异步更新数据
                const { data } = await getArticles({ 
                    channel_id: this.channel.id,  //请求的页码的id
                    timestamp: this.pre_timestamp ? this.pre_timestamp : Date.now(),   /* 请求的时间戳，就是相等于页码，
                    请求回来的数据就有一个下一页的时间戳，假如需要访问下一页的数据需要使用这个时间戳 */
                    with_top: 1      //是否显示置顶的文章，0，为不加载，1，为加载
                })
                // console.log(data)
                const { results } = data.data;
                this.articles.push(...results);

                // console.log(this.articles)
                // 3.加载状态结束
                this.loading = false
                // 4.数据全部加载完成
                if(results.length){
                    // console.log("111")
                    // 更新下一页的数据
                    this.pre_timestamp = data.data.pre_timestamp;
                    // console.log(this.pre_timestamp)
                }else{
                    //没有数据不触发更新
                    this.finished = true
                }
            },
            async onRefresh() {
                // console.log(this.channel.id)
                // 1.异步更新数据
                const { data } = await getArticles({ 
                    channel_id: this.channel.id,  //请求的页码的id
                    timestamp: Date.now(),   /* 请求的时间戳，就是相等于页码，
                    请求回来的数据就有一个下一页的时间戳，假如需要访问下一页的数据需要使用这个时间戳 */
                    with_top: 1      //是否显示置顶的文章，0，为不加载，1，为加载
                })
                // console.log(data)
                const { results } = data.data;
                this.articles.unshift(...results);

                // console.log(this.articles)
                // 3.加载状态结束
                this.freshLoading = false
            }
        },
        mounted() {
            const articleLists = this.$refs['article-lists']
            articleLists.onscroll = debounce(() => {
                // console.log(articleLists.scrollTop)
                this.scrollTop = articleLists.scrollTop
            },200)
        },
        // 组件缓存的时候会触发这个生命周期函数
        activated() {
            // 把之前存储的数据设置回去
            this.$refs['article-lists'].scrollTop = this.scrollTop
        },
    }
</script>

<style lang="less" scoped>
.article-lists-container{
    position: fixed;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 50px;
    overflow-y: scroll;
}
</style>